<template>
  <div class="person_detail">
    <!-- 个人信息标题 -->
    <div class="person_nav">
      <img src="../../assets/images/jiantou_left.png" alt="" class="back-arrow" @click="goback">
      <div class="title">个人信息</div>
    </div>
    <!-- 个人信息主体 -->
    <div class="person_body">
      <!-- 头像 -->
      <div class="head" @click="gotoPersonhead">
        <span>头像</span>
        <div class="right-content">
          <img :src="avatarUrl || defaultAvatar" alt="头像" class="photo">
          <img src="../../assets/images/fangxiang-you.png" alt="箭头" class="arrow">
        </div>
      </div>
      <!-- 昵称 -->
      <div class="name" @click="showEditNickname = true">
        <span>昵称</span>
        <div class="right-content">
          <span>{{nickname}}</span>
          <img src="../../assets/images/fangxiang-you.png" alt="箭头" class="arrow">
        </div>
      </div>
      <!-- 联系方式 -->
      <div class="phone" @click="showEditPhone = true">
        <span>联系方式</span>
        <div class="right-content">
          <span>{{phone}}</span>
          <img src="../../assets/images/fangxiang-you.png" alt="箭头" class="arrow">
        </div>
      </div>
      <!-- 性别 -->
      <div class="sex" @click="showEditSex = true">
        <span>性别</span>
        <div class="right-content">
          <span>{{sex === 0 ? '男' : '女'}}</span>
          <img src="../../assets/images/fangxiang-you.png" alt="箭头" class="arrow">
        </div>
      </div>
    </div>

    <!-- 修改昵称弹窗 -->
    <div v-if="showEditNickname" class="overlay">
      <div class="overlay-content">
        <h3>修改昵称</h3>
        <input v-model="newNickname" placeholder="请输入新的昵称">
        <button @click="showEditNickname = false">取消</button>
        <button @click="updateNickname">保存</button>
      </div>
    </div>

    <!-- 修改联系方式弹窗 -->
    <div v-if="showEditPhone" class="overlay">
      <div class="overlay-content">
        <h3>修改联系方式</h3>
        <input v-model="newPhone" placeholder="请输入新的联系方式">
        <button @click="showEditPhone = false">取消</button>
        <button @click="updatePhone">保存</button>
      </div>
    </div>

    <!-- 修改性别弹窗 -->
    <div v-if="showEditSex" class="overlay">
      <div class="overlay-content2">
        <h3>修改性别</h3>
        <div class="button-group">
          <button @click="updateSex(0)" class="man">男</button>
          <button @click="updateSex(1)" class="woman">女</button>
        </div>
        <button @click="showEditSex = false" class="cancel-button">取消</button>
      </div>
    </div>

</div>
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue"
import { useRouter } from "vue-router";
import { editPhone,getUserInfo,editNickname,editSex } from "../../api/Person/index";
import { useTokenStore } from "../../stores/Login";
import defaultAvatar from '../../assets/images/icon.png';

const router = useRouter();
const userId = ref(0);
const tokenStore = useTokenStore();
const showEditNickname = ref(false);
const showEditPhone = ref(false);
const showEditSex = ref(false);
const phone = ref("");
const newPhone = ref("");
const nickname = ref("");
const newNickname = ref("");
const Authorization = ref("");
const avatarUrl = ref("");
const sex = ref(0);

//从本地存储中获取用户信息
const storedUser = localStorage.getItem("user");
if (storedUser) {
  const user = JSON.parse(storedUser).user; // 解析用户信息
  userId.value = user.userId; // 提取用户 ID
  phone.value = user.phoneNumber; // 提取电话号码
  nickname.value = user.nickname; // 提取昵称
   Authorization.value = user.token; // 提取 token
   avatarUrl.value = user.avatarUrl; // 提取头像 URL
   sex.value = user.sex; // 提取性别
}

//查看头像
const gotoPersonhead = () => {
  router.push("/personhead");
};

// 更新昵称
// const updateNickname = async () => {
//   if (newNickname.value) {
//     try {
//       const response = await editNickname(newNickname.value);
//       console.log("请求数据:", response.data); // 打印请求数据
//       nickname.value = newNickname.value;
//       tokenStore.user.nickname = newNickname.value;
//       showEditNickname.value = false;
//       console.log('昵称更新成功:', response.data);

//        // 更新本地存储中的用户信息
//        const storedUser = localStorage.getItem('user');
//       if (storedUser) {
//         const user = JSON.parse(storedUser).user;
//         user.nickname = newNickname.value;
//         localStorage.setItem('user', JSON.stringify({ user }));
//       }
//     } catch (error) {
//       console.error('保存昵称失败:', error);
//     }
//   }
// };

// 更新昵称
const updateNickname = async () =>{
  try {
    const requestData = {
      userId: userId.value,
      newNickname: newNickname.value
    };
    const response = await editNickname(requestData);
    nickname.value = newNickname.value;
    tokenStore.user.nickname = newNickname.value;
    showEditNickname.value = false;
    console.log('昵称更新成功:', response.data);

    // 更新本地存储中的用户信息
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      const user = JSON.parse(storedUser).user;
      user.nickname = newNickname.value;
      localStorage.setItem('user', JSON.stringify({ user }));
    }
  } catch (error) {
    console.error('保存昵称失败:', error);
  }
}

// 更新电话号码
const updatePhone = async () => {
  if (newPhone.value) {
    try {
      const requestData = {
        userId: userId.value,
        phoneNumber: newPhone.value
      };
      console.log("请求数据:", requestData); // 打印请求数据
      await editPhone(requestData);
      phone.value = newPhone.value;
      showEditPhone.value = false;
      console.log("电话号码更新成功");
      // 更新本地存储中的用户信息
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      const user = JSON.parse(storedUser).user;
      user.phoneNumber = newPhone.value;
      localStorage.setItem('user', JSON.stringify({ user }));
    }
    } catch (error) {
      console.error("保存电话号码失败:", error);
    }
  }
};

// 更新性别
const updateSex =async (newSex: Number) => {
  try {
    const requestData = {
      userId: userId.value,
      sex: newSex
    };
    const response = await editSex(requestData);
    sex.value = newSex;
    showEditSex.value = false;
    console.log('性别更新成功:', response.data);

    // 更新本地存储中的用户信息
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      const user = JSON.parse(storedUser).user;
      user.sex = newSex;
      localStorage.setItem('user', JSON.stringify({ user }));
    }
  } catch (error) {
    console.error('保存性别失败:', error);
  }
};

// 返回我的页面
const goback = () => {
  router.go(-1);
}

// 加载用户信息
const loadUserInfo = async () => {
  try {
    console.log("开始加载用户信息"); // 添加调试信息
    console.log("用户 ID:", userId.value); // 打印用户 ID
    const response = await getUserInfo(userId.value);
    console.log("响应数据:", response.data); // 打印响应数据
    phone.value = response.data.data;
    newPhone.value = phone.value; // 初始化 newPhone
    console.log("电话号码:", phone.value); // 打印电话号码
  } catch (error) {
    console.error("加载用户信息失败:", error);
  }
};

// 在组件挂载后加载用户信息
onMounted(() => {
  loadUserInfo();
});
</script>
<style lang="less" scoped>
.person_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 50px; 
  // border-bottom: 1px solid #ddd; 
}

.back-arrow {
  position: absolute;
  left: 10px; 
  width: 34px; 
  height: 34px; 
  margin-top: 10px;
}

.title {
  font-size: 18px; 
  text-align: center;
  margin-top: 10px;
}

.person_body {
  width: 350px;
  height: 290px;
  padding: 20px;
  background-color: #FFFFFF;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 20px;
  border-radius: 10px;
}

.person_body .photo{
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.person_body .arrow{
  width: 14px;
}
.person_body > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0; /* 调整内边距 */
  
}

.person_body span {
  font-size: 16px; /* 设置文字大小 */
  color: #333; /* 设置文字颜色 */
}

.right-content {
  display: flex;
  align-items: center;
}

.right-content .photo {
  margin-right: 10px; /* 设置文字与箭头之间的间距 */
}


.right-content span {
  margin-right: 10px; /* 设置文字与箭头之间的间距 */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-content {
  height: 200px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.overlay-content2 {
  width: 200px;
  height: 200px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.overlay-content h3 {
  margin-top: 10px;
  margin-bottom: 30px;
}

.overlay-content2 h3 {
  margin-top: 10px;
  margin-bottom: 30px;
}

.overlay-content input {
  width: 80%;
  height: 25px;
  padding: 10px;
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.overlay-content2 .button-group {
  display: flex;
  justify-content: space-between;
}

.overlay-content button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.overlay-content2 button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.overlay-content button:first-of-type {
  background-color: #4095E5;
  color: #fff;
}

.overlay-content button:last-of-type {
  
  background-color: rgba(252, 30, 9, 0.8);
  color: #fff;
}

.overlay-content2 .man {
  background-color: #4095E5;
  color: #fff;
}

.overlay-content2 .woman{
  
  background-color: rgba(252, 30, 9, 0.8);
  color: #fff;
}

.overlay-content2 .cancel-button {
  margin-top: 20px;
  background-color: #ddd;
}
</style>
